<template>
  <div>
    <bread-crumb :crumb="crumb"></bread-crumb>
    <el-card>
      <el-form
        :model="createNewAccountForm"
        :rules="createNewAccountRules"
        ref="createNewAccountFormRef"
        label-width="100px"
      >
        <el-form-item label="用户名 : " prop="username">
          <el-input v-model="createNewAccountForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码 : " prop="password">
          <el-input type="password" v-model="createNewAccountForm.password"></el-input>
        </el-form-item>
        <el-form-item label="权限 : ">
          <template>
            <el-radio v-model="radio" label="1">普通业务员</el-radio>
            <el-radio v-model="radio" label="2">业务主管</el-radio>
            <el-radio v-model="radio" label="3">业务经理</el-radio>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="createNewAccount()">添加</el-button>
          <el-button type="info" @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import breadCrumb from '../../components/common/Breadcrumb'
export default {
  name: 'createnewaccount',
  components: {
    breadCrumb
  },
  data () {
    return {
      createNewAccountForm: {
        username: '',
        password: ''
      },
      createNewAccountRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 50, message: '用户名长度在3 ~ 50个字符之间', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      radio: '1',
      crumb: ['账户管理', '添加账户']
    }
  },
  methods: {
    // 提交表单
    createNewAccount () {
      this.$refs.createNewAccountFormRef.validate(valid => {
        if (!valid) {
          return false
        }
        // TODO: 提交代码等待后端接口
        return false
      })
    },
    // 重置表单
    resetForm () {
      this.$refs.createNewAccountFormRef.resetFields()
    }
  }
}
</script>
